<template>
  <div class="div">
    <!-- 面包屑 -->
    <div class="top-div">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">客户</el-breadcrumb-item>
        <el-breadcrumb-item><a href="#">订货历史</a></el-breadcrumb-item>
      </el-breadcrumb>
      <el-button type="primary" class="top-div-button" style="">导出</el-button>
    </div>
    <!-- table表格div -->
    <div class="table-div">
      <!-- date日期选择器。 -->
      <el-date-picker
        style="width: 210px; margin-right: 10px"
        v-model="value2"
        type="daterange"
        align="right"
        unlink-panels
        range-separator=""
        start-placeholder="开始日期"
        :picker-options="pickerOptions"
      ></el-date-picker>
      <!-- Cascader级联选择器. -->
      <el-cascader
        style="margin-right: 10px"
        v-model="value"
        :options="options"
        @change="handleChange"
      ></el-cascader>
      <!-- input输入框. -->
      <el-input
        v-model="input"
        placeholder="输入客户名称/编码"
        style="width: 210px; margin-right: 10px"
      ></el-input>
      <el-input
        v-model="input"
        placeholder="请选商品名进行搜索"
        style="width: 210px"
      ></el-input>
      <!-- p标签: -->
      <div class="table-div-doubleparagraph">
        <p
          style="
            margin-right: 20px;
            display: inline-block;
            width: 49%;
            font-size: 16px;
            font-weight: bold;
          "
        >
          商品汇总
        </p>
        <p
          style="
            display: inline-block;
            width: 49%;
            font-size: 16px;
            font-weight: bold;
          "
        >
          商品明细
        </p>
      </div>
      <div class="table-div-span">
        <sapn class="span01">发货金额合计:0</sapn>
        <sapn class="span02">退货金额合计:0</sapn>
        <sapn class="span03">实际金额合计:0</sapn>
      </div>
      <el-table
        :data="tableData01"
        border="true"
        style="
          width: 49%;
          height: 450px;
          display: inline-block;
          margin-right: 20px;
        "
      >
        <el-table-column prop="shangpin" label="商品"></el-table-column>
        <el-table-column prop="name" label="单位"></el-table-column>
        <el-table-column prop="address" label="发货数量"></el-table-column>
        <el-table-column prop="address" label="发货金额"></el-table-column>
        <el-table-column prop="address" label="退货数量"></el-table-column>
        <el-table-column prop="address" label="退货金额"></el-table-column>
        <el-table-column prop="address" label="实际金额"></el-table-column>
      </el-table>
      <el-table
        :data="tableData02"
        border="true"
        style="width: 49%; height: 450px; display: inline-block"
      >
        <el-table-column prop="date" label="发货日"></el-table-column>
        <el-table-column prop="name" label="商品"></el-table-column>
        <el-table-column prop="address" label="单位"></el-table-column>
        <el-table-column prop="address" label="单位"></el-table-column>
        <el-table-column prop="address" label="单位"></el-table-column>
        <el-table-column prop="address" label="单位"></el-table-column>
        <el-table-column prop="address" label="单位"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: '',
      value: [],
      // 级联选择器数据.
      options: [
        {
          value: 'quanbufenlei',
          label: '全部分类',
        },
        {
          value: 'zhinan',
          label: '指南',
          children: [
            {
              value: 'shejiyuanze',
              label: '填充字体',
            },
            {
              value: 'shejiyuanze',
              label: '填充字体',
            },
            {
              value: 'shejiyuanze',
              label: '填充字体',
            },
          ],
        },
        {
          value: 'zujian',
          label: '组件',
          children: [
            {
              value: 'basic',
              label: 'Basic',
            },
            {
              value: 'form',
              label: 'Form',
            },
            {
              value: 'data',
              label: 'Data',
            },
            {
              value: 'notice',
              label: 'Notice',
            },
            {
              value: 'navigation',
              label: 'Navigation',
            },
            {
              value: 'others',
              label: 'Others',
            },
          ],
        },
      ],
      //日期选择器数据.
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            },
          },
        ],
      },
      // table数据.
      tableData01: '',
      tableData02: '',
      value2: '',
    }
  },
}
</script>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
}
.div {
  .top-div {
    position: absolute;
    top: 0;
    width: 100%;
    height: 45.6px;
    background-color: white;
    display: flex;
    align-items: center;
    flex-wrap: nowrap; //不换行。
    justify-content: space-between;
    //面包屑的样式。
    .el-breadcrumb {
      margin-left: 23px;
    }
    .top-div-button {
      color: rgb(96 98 102);
      background-color: rgb(255 255 255);
      border-color: rgb(216 216 216);
    }
    button.el-button.el-button--primary.el-button--small {
      margin-right: 50px;
      width: 75px;
      height: 30px;
    }
  }
  .table-div {
    padding: 10px 15px;
    margin-top: 40px;
    .table-div-doubleparagraph {
      margin-top: 20px;
    }
    .table-div-span {
      margin-top: 15px;
      width: 49%;
      height: 32px;
      display: flex;
      .span01 {
        flex: 1;
      }
      .span02 {
        flex: 1;
      }
      .span03 {
        flex: '';
      }
    }
  }
}
</style>
